<template>
	<!-- 任务组件 -->
	<view>
		<u-popup :show="showflak" @close="close" mode="left" :zIndex="10088" :overlayStyle="{zIndex:'10088'}"
			:customStyle="{width:'80vw',height:'100vh',}">
			<scroll-view :scroll-y="true" style="height: 100%;overflow-y: auto;" @scrolltolower="lower">
				<view class="list" style="padding: 20px 0;">
					<view
						style="display: flex;position: sticky;top:0px;width: 100%;background-color: #fff;padding-top: 20px;margin-bottom: 15px;align-items: center; z-index: 99;">
						<uni-icons @click="backXM" type="back" style="width: 30px;font-size: 30px;"></uni-icons>
						<view class="taskName">
							{{xmName}}
						</view>
					</view>
					<view style="padding: 0 60rpx; position: sticky;top:100rpx;width: 100%;background-color: #fff;padding-top: 20px;margin-bottom: 15px;z-index: 999;">
						<uni-easyinput suffixIcon="search" v-model="searchvalue" placeholder="输入任务名称" type="text"
							confirmType="search" @iconClick="search" @confirm="search"
							style="margin-bottom: 10px;" />
					</view>
						
					

					<view v-if="showAdd" class="rightItem" @click="handleRightAdd" style="height: 80rpx;">
						<view class="add">
							<uni-icons type="plusempty" style="font-size: 80rpx;color: #999;"></uni-icons>
						</view>
					</view>
					<view v-else class="rightItem" @click="handleRight({Id:'',Name:''})" style="height: 80rpx;">
						<view class="add">
							全部任务
						</view>
					</view>
					<view class="rightItem" v-for="item,index in data" :key="item.Id" @click="handleRight(item)">
						<image class="flagImg" v-if="index == 0&&flag" src="/static/new.png" mode=""></image>
						<view class="title">
							<text>{{item.Name}}</text>
						</view>
						<view class="userInfo">

							<view class="tag-view" style="display: flex;flex-wrap: wrap;">
								<uni-tag :text="item.text" type="primary" v-for="item in item.user" :key="item.value"
									inverted style="margin-right: 5px;margin-bottom: 5px;" />
							</view>
							<view class="time">
								{{item.CreateTime.substring(0,10)}}
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="">
					<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="showadd" @close="showaddclose" mode="center" closeable :zIndex="10089" :round="10"
			:overlayStyle="{zIndex:'10089'}" :customStyle="{width:'80vw',}">

			<uni-title type="h4" title="添加任务" style="margin: 0 auto;"></uni-title>
			<view style="width: 100%;padding: 20px;">

				<uni-forms :modelValue="entity" label-position="top" ref="form" :rules="rules">
					<uni-forms-item label="任务名称" name="Name" required>
						<uni-easyinput type="text" v-model="entity.Name" placeholder="请输入任务名称" />
					</uni-forms-item>


				</uni-forms>
				<button type="primary" @click="dialogInputConfirm">保存</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		name: "listitem",
		props: {
			xmId: {
				type: String,
				require: true
			},
			xmName: {
				type: String,
				require: true
			},
			showAdd: {
				require: false,
				default: true
			}
		},
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				showadd: false,
				entity: {
					AppyId: "1620239917378441218",
					AppyName: "巡检GO",
				},
				data: [],
				rules: {
					Name: {
						rules: [{
							required: true,
							errorMessage: '请输入任务名称',
						}]
					},
				},
				searchvalue: '',
				showflak: false,
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				flag: false,
				openType:""//打开的类型。 是从编辑页面进来打开的，还是上传页面进来打开的
			};
		},
		methods: {
			// 顶部搜索框搜索
			search(){
				this.pagination.PageIndex=1
				// 刷新列表数据
				this.getDataList()
			},
			backXM() {
				this.$emit('backXM', true)
				this.close()
			},
			showaddclose() {
				this.showadd = false
			},
			dialogInputConfirm(e) {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$http('Base_TaskWork/Base_Task/SaveData', {
						...this.entity,
						ProjectId: this.xmId,
						Status: 0
					}).then(res => {
						if (res.Success) {
							this.showadd = false
							this.flag = true
							this.getDataList(true)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			// 任务列表点击
			handleRight(item) {
				console.log('任务列表点击', item)
				this.$emit('itemClick', item, this.openType)
				this.close()
			},
			handleRightAdd() {
				this.showadd = true
			},
			close() {
				this.showflak = false
			},
			open(type) {
				this.openType=type
				this.showflak = true
				this.searchvalue = ''
				// this.entity.Name = ""//清空任务名称默认
				// 宏任务延时
				setTimeout(() => {
					console.log(this.xmId);
					this.pagination.PageIndex = 1
					this.getDataList()
				})
			},
			// 任务列表数据获取
			getDataList(flag) {
				this.data=[]
				this.status="loading"
				if (!flag) this.flag = false
				uni.showLoading()
				this.$http("Base_TaskWork/Base_Task/GetDataListByMoreCondition", {
						...this.pagination,
						Search: {
							"ClassType": 0,
							Conditions: [{
								Condition: 'ProjectId',
								Keyword: this.xmId
							}, {
						"Condition": "AppyId",
						"Keyword": "1620239917378441218",
					}, {
						"Condition": "Name",
						"Keyword": this.searchvalue,
					}]
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							if(res.Data.length==0) {
								this.status="noMore"
								return
							}
							this.data = res.Data;
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status="noMore"
								return
							}
						}
					});
			},
			// 下拉加载
			lower() {
				if (this.data.length >= this.total) {
					this.status="noMore"
					return
				}
				uni.showLoading()
				this.status="loading"
				this.pagination.PageIndex++
				this.$http("Base_TaskWork/Base_Task/GetDataListByMoreCondition", {
						...this.pagination,
						Search: {
							"ClassType": 0,
							Conditions: [{
								Condition: 'ProjectId',
								Keyword: this.xmId
							}, {
								"Condition": "AppyId",
								"Keyword": "1620239917378441218",
							}, {
						"Condition": "Name",
						"Keyword": this.searchvalue,
					}]
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							this.data = this.data.concat(res.Data)
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status="noMore"
								return
							}
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.taskName {
		padding: 0 15rpx;
		font-size: 36rpx;
		color: #336dba;
		font-weight: 600;
		line-height: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;

		.time {
			color: #999;
		}
	}

	.rightItem {
		position: relative;

		.flagImg {
			position: absolute;
			top: -1px;
			right: -1px;
			height: 90rpx;
			width: 90rpx;
		}
	}
</style>